<template>
  <div class="main-box">
    <div class="main-item" v-if="!(saveFolderList == null || saveFolderList.length === 0 ) || !(recentLikeVideoList === null || recentLikeVideoList.length === 0)">
      <div class="item-save" v-if="!(saveFolderList == null || saveFolderList.length === 0)">
        <div class="header">
          <div class="left">
            <div class="title">收藏夹</div>
            <div class="count" v-if="selfUserId === curUserId">·20</div>
            <div class="item-visivle" v-if="selfUserId === curUserId">
              仅自己可见
            </div>
          </div>
          <div class="right">
            <el-button @click="toSave()">查看更多</el-button>
          </div>
        </div>
        <div class="save-list">
          <div class="grid-container">
            <div class="grid-item" v-for="item in saveFolderList" :key="item.saveId">
              <div class="save-pic">
                <img @click="toSave" class="pic" :src="item.saveCover" alt="">
                <span class="record-count">{{item.recordCount}}个视频</span>
              </div>
              <div class="save-name">{{ item.saveName }}</div>
              <div class="save-visible">
                {{ item.permission === 1? '公开':'私有' }}
              </div>
            </div>


          </div>

        </div>
      </div>
<!--      <div v-else style="margin:0 auto;font-size: 20px;color: var(&#45;&#45;gray-font-color&#45;&#45;);text-align: center">-->
<!--        主人还没有收藏过视频哦-->
<!--      </div>-->
      <div class="item-save" v-if="!(recentLikeVideoList === null || recentLikeVideoList.length === 0)">
        <div class="header">
          <div class="left">
            <div class="title">最近点赞的视频</div>
            <div class="count" v-if="selfUserId === curUserId">&nbsp;·&nbsp;20</div>&nbsp;
            <div class="item-visivle" v-if="selfUserId === curUserId">
              仅自己可见
            </div>
          </div>

        </div>
        <FiveColVideoList :data-list="recentLikeVideoList" :is-save="false"></FiveColVideoList>

      </div>
<!--      <div v-else style="margin:0 auto;font-size: 20px;color: var(&#45;&#45;gray-font-color&#45;&#45;)">-->
<!--        主人还没有点赞过视频哦-->
<!--      </div>-->
    </div>
    <div class="main-item" v-else>
      <el-empty description="这里什么也没有..." />
    </div>

    <div class="right-aside">
      <div class="personal-data">
        <div class="header">
          <div class="title">
            个人资料
          </div>
          <div class="edit">
            编辑 &nbsp;>
          </div>
        </div>
        <div class="uid">
          1747068500813
        </div>
        <div class="birthday">
          11-01
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>

import FiveColVideoList from "@/components/FiveColVideoList.vue";
import {onMounted, reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {getSaveFolder, queryLikeVideoList, querySaveList} from "@/api/api.js";
import {useUserStore} from "@/stores/userInfoStore.js";
import emitter from "@/utils/emitter.js";

const route = useRoute()
console.log("当前登录用户id为："+route.params.userId)

const dataList = ref([
  {
    id:1,
    videoImage:"/img/recommendVideoList/video01.png",
    videoTitle:"白色情人节快乐",
    videoAuthor:"庭树沐年",
    saveTime:'03-05'
  }
])

/* 收藏夹相关 */
const saveFolderList = ref([
  {
    saveId:'',
    saveCover:'',
    saveName:'',
    permission:''
  }
])

const queryParams = reactive({
  page:1,
  pageSize:10
})
const selfUserId = ref()
let curUserId = ref(route.params.userId)
const getSaveFolderList = async () => {

  if(!curUserId.value){
    curUserId.value = useUserStore().userInfo.userId
  }
  if(!curUserId){
    curUserId.value = localStorage.getItem("userId")
  }
  console.log("开始获取收藏夹")
  const res = await getSaveFolder(curUserId.value,queryParams);
  console.log("收藏夹对象为："+res.data)
  saveFolderList.value = res.data.records
}
onMounted(async ()=>{
  selfUserId.value = localStorage.getItem("userId");
  // 默认跳转到主页


  await getSaveFolderList()
  await getRecentLikeVideoList();
})

/* 收藏夹相关结束 */


/* 最近点赞视频相关 */

const recentLikeVideoList = ref([
  {
    videoId:0,
    videoCover:'',
    videoIntroduction:'',
    videoOwnerId:'',
    videoOwnerNickname:'',
    createTime:'',
  }
])

const queryLikeParams = reactive({
  userId:0,
  page:1,
  pageSize:10
})

const getRecentLikeVideoList = async () => {
  if(!curUserId.value){
    curUserId.value = useUserStore().userInfo.userId
  }
  if(!curUserId.value){
    curUserId.value = localStorage.getItem("userId")
  }
  queryLikeParams.userId = curUserId.value
  const res = await queryLikeVideoList(queryLikeParams);
  console.log(res)
  recentLikeVideoList.value = res.data.records
}


/* 最近点赞视频相关结束 */

const router = useRouter();
const toSave = () => {
  let userId = route.params.userId;
  // router.push({
  //   name:'save',
  //   params:{
  //     userId
  //   }
  // })
  emitter.emit("changeRoute",'/space/save/'+userId)
}


</script>
<style lang="scss" scoped>
.main-box{
  display: flex;
  .right-aside{
    width: 280px;
    //background-color: #b61515;
    height: 100px;
    padding-left: 25px;
    .personal-data{
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      border-radius: 5px;
      font-size: 13px;
      background-color: #ececec;
      padding: 15px;
      .header{
        .title{
          font-size: 14px;
        }
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .main-item{
    width: 1080px;
    margin:10px 0;
    .item-save{
      .header{
        display: flex;
        justify-content: space-between;
        .left{
          min-width: 200px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: gray;
          .title{
            color: black;
            font-size: 25px;
            font-weight: bold;
          }
          .count{

          }
          .item-visivle{

          }
        }
        .right{

        }
      }
      .save-list{
        margin-top: 20px;
        .grid-container {
          display: grid;
          grid-template-columns: repeat(5, 1fr); /* 5列，每列等宽 */
          gap: 16px; /* 列与列、行与行之间的间距 */
          .grid-item {
            //background-color: #f0f0f0; /* 背景色 */
            //padding: 16px; /* 内边距 */
            //text-align: center; /* 文本居中 */

            //border-radius: 8px; /* 圆角 */
            height: 180px;
            display: flex;flex-direction: column;
            justify-content: space-around;
            .save-pic{
              border-radius: 8px; /* 圆角 */
              height: 115px;
              overflow: hidden;
              position: relative;
              .pic{
                cursor: pointer;
                width: 100%;
              }
              .record-count{
                position: absolute;
                right: 7px;
                bottom: 5px;
                color:white;
                font-size: 13px;
              }
            }
            .save-name{
              font-size: 14px;
            }
            .save-visible{
              font-size: 12px;
              color: gray;
            }
          }
        }

      }
    }
  }
}

</style>